<template>
  <div class="app">
    <div class="app_top" v-if="pageshow!=true">
      <h3 class="app_top_span">里程碑</h3>
      <div class="app_top_span">
        <span class="app_top_span_text" @click="detailsgo">更多</span>
        <span class="app_top_span_text" @click="detailscreated">新建</span>
      </div>

    </div>
    <div class="app_item" v-for="item in mptlist">
      <div style="display: flex;justify-content: space-between;flex: 6;">
        <div class="app_item_mian">
          <div class="app_item_mian_top">
            <div class="app_item_mian_top_span">{{ item.name }}</div>
            <div class="app_item_mian_top_yu" v-if="item.status=='03'">已逾期</div>
          </div>
          <div class="app_item_mian_bottom">
            <span class="app_item_mian_bottom_span">{{ item.startDate }}——{{ item.endDate }}</span>
          </div>
        </div>
        <div style="height: 100%;display: flex;align-items: center">
          <el-button @click="taskQueryClick(item.mptId)" style="height: 30px;margin-right: 10px;" type="success" size="mini" plain>
            查看任务
          </el-button>
        </div>
      </div>

      <div class="app_item_stats">
        <div class="app_item_statssrtting" v-if="pageshow==true">
          <div class="app_item_seting" @click="editmilepost(item)">
            <i style="font-size: 18px;margin-right:3px;margin-top:3px"
               class="el-icon-edit-outline  app_item_seting_icon"></i>
            <span>修改</span>
          </div>
          <div class="app_item_seting" @click="closeclick(item)" v-if="item.status=='01'">
            <i style="font-size: 17px;margin-right:3px;margin-top:3px" class="el-icon-lock  app_item_seting_icon"></i>
            <span>关闭</span>
          </div>
          <div class="app_item_seting" v-if="item.status=='02'" @click="openclick(item)">
            <i style="font-size: 17px;margin-right:3px;margin-top:3px" class="el-icon-lock  app_item_seting_icon"></i>
            <span>开启</span>
          </div>
          <div class="app_item_seting" @click="del(item)">
            <i style="font-size: 17px;margin-right:3px;margin-top:3px" class="el-icon-delete  app_item_seting_icon"></i>
            <span>删除</span>
          </div>
        </div>
        <div class="app_item_stats_top">
          <el-progress :percentage="item.percentage" :show-text='showtext'></el-progress>
        </div>
        <div class="app_item_stats_button">
          <div class="app_item_stats_button_one">
            <div>
              <span class="app_item_stats_button_one_span">任务：{{ item.taskNum }}</span>
            </div>
          </div>
          <div class="app_item_stats_button_two">
                        <span class="app_item_stats_button_one_span">
                            进度：{{ item.percentage }}%
                        </span>
          </div>
        </div>

      </div>
    </div>
    <div class="projectTask_data" v-if="mptlist.length==0" v-cloak>
      <el-empty description="暂无里程碑"></el-empty>
    </div>
    <div class="proj_pagination">
      <pagination v-show="total>0" :total="total" :current.sync="current" :size.sync="size" @pagination="listclick"/>
    </div>
    <!--        查看任务-->
    <el-dialog title="任务" width="900px" :visible.sync="taskFormVisible">
      <el-select style="position: absolute;top: 17px;left: 66px" size="mini" @change="statusClick" clearable v-model="listQuery.status"
                 placeholder="请选择">
        <el-option
            v-for="item in taskStatusForm"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <div class="task_list" v-for="item in taskForm">
        <div class="task_list_left">
          <chooseStatus :taskForm="item" style="margin-right: 10px;"></chooseStatus>
          <el-tooltip effect="dark" :content="item.name" placement="right">
            <span class="task-table-item-title" @click="detailsClick(item)">{{ item.name }}</span>
          </el-tooltip>
          <el-tooltip effect="dark" content="需求" placement="right">
            <span class="task-table-item-status">{{ item.taskType | taskTypeFilter }}</span>
          </el-tooltip>
          <span class="task-table-item-date" v-if="item.startDate!=null">{{ item.startDate }} - {{
              item.endDate
            }}</span>
          <span class="task-table-item-overdue"
                v-if="item.status!='00'&&item.status!='07'&&item.status!='08'&&item.status!='10'">{{
              beOverdue(item.endDate) ? '逾期' + beOverdue(item.endDate) + '天' : ''
            }}</span>
          <span class="task-table-item-date">{{ item.createDate }}</span>
        </div>
        <div class="task_list_right">
          <div class="task-table-item-member">
            <el-tooltip v-if="item.masterSysUser" effect="dark" :content="item.masterSysUser.userName"
                        placement="right">
              <span class="task-table-item-member-title">{{ item.masterSysUser.userName }}</span>
            </el-tooltip>
            <div v-if="item.masterSysUser" class="task-table-item-member-logo">
              <el-image style="width: 100%;height: 100%;border-radius: 100%" v-if="item.masterSysUser.avatar"
                        :src="item.masterSysUser.avatar">
              </el-image>
              <el-image style="width: 100%;height: 100%;border-radius: 100%" v-else
                        src="https://img2.baidu.com/it/u=2277413437,2773342262&fm=253&fmt=auto&app=120&f=JPEG?w=516&h=500">
              </el-image>
            </div>
          </div>
        </div>
      </div>
      <el-empty description="暂无任务" v-if="taskForm.length==0"></el-empty>
      <pagination style="margin-bottom: 10px" :autoScroll="false" v-show="taskTotal>0" :pagerCounts="pagerCounts" :total="taskTotal"
                  :current.sync="listQuery.current" :size.sync="listQuery.size" @pagination="taskList"/>
    </el-dialog>
  </div>
</template>
<script>
import {list, del, close, open} from "@/api/mpt";
import pagination from "@/components/Pagination/index.vue";
import {list as taskList} from "@/api/task";
import chooseStatus from "@/components/chooseStatus";
export default {
  components: {
    pagination,chooseStatus
  },
  props: ["pageshow"],
  data() {
    return {
      showtext: false,
      current: 1,
      size: 10,
      total: 0,
      mptlist: [],
      masterUserId: "",
      status: "",
      name: "",
      taskFormVisible:false,
      taskForm: [],
      taskTotal: 0,
      pagerCounts: 3,
      listQuery: {
        current: 1,
        size: 10,
        parentId: undefined,
        level: undefined,
        taskType: "",
        status:'',
        mptId:''
      },
      taskStatusForm: [{
        value: '00',
        label: '待办的'
      }, {
        value: '01',
        label: '已接收'
      }, {
        value: '02',
        label: '进行中'
      }, {
        value: '07',
        label: '已完成'
      }, {
        value: '08',
        label: '已验收'
      }, {
        value: '11',
        label: '已中止'
      }, {
        value: '09',
        label: '已取消'
      }],
    };
  },
  created() {
    this.listclick();
    this.$EventBus.$on('milepost-add', res => { // 监听新增完毕
      // 更新列表数组
      this.listclick();
    });
  },
  filters: {
    taskTypeFilter(data) {
      if (data == "00") {
        return "需求";
      } else if (data == "01") {
        return "设计";
      } else if (data == "02") {
        return "开发";
      } else if (data == "04") {
        return "测试";
      } else if (data == "05") {
        return "缺陷";
      } else if (data == "06") {
        return "其他";
      }
    },
  },
  methods: {
    empty() {
      this.status = "";
      this.name = "";
      this.masterUserId = "";
      this.listclick();
    },
    ststuslist(data) {
      this.status = data;
      this.listclick();
    },
    nameclick(data) {
      this.name = data;
      this.listclick();
    },
    filter(data) {
      this.masterUserId = data;
      this.listclick();
    },
    listclick() {
      let parmas = new URLSearchParams();
      parmas.append("current", this.current);
      parmas.append("size", this.size);
      parmas.append("projId", this.$route.query.id);
      parmas.append("masterUserId", this.masterUserId);
      parmas.append("status", this.status);
      parmas.append("name", this.name);
      list(parmas).then((res) => {
        this.mptlist = res.data.records;
        this.mptlist.map((v) => {
          let percentageNum = Math.round((v.verifyTaskNum / v.taskNum) * 100);
          Object.assign(v, {percentage: percentageNum ? percentageNum : 0,});
        });
        this.total = res.data.total;
      });
    },
    closeclick(data) {
      this.$confirm("确认关闭?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            let parmat = new URLSearchParams();
            parmat.append("mptId", data.mptId);
            close(parmat).then((res) => {
              this.$message({message: "关闭成功", type: "success"});
              this.mptlist.forEach((item) => {
                if (item.mptId == data.mptId) {
                  item.status = "02";
                }
              });
            });
          })
          .catch(() => {
          });
    },
    openclick(data) {
      this.$confirm("确认开启?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            let parmat = new URLSearchParams();
            parmat.append("mptId", data.mptId);
            open(parmat).then((res) => {
              this.$message({message: "开启成功", type: "success"});
              this.mptlist.forEach((item) => {
                if (item.mptId == data.mptId) {
                  item.status = "01";
                }
              });
            });
          })
          .catch(() => {
          });
    },
    del(data) {
      let _this = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            let parmat = new URLSearchParams();
            parmat.append("ids", data.mptId);
            del(parmat).then((ress) => {
              _this.mptlist.forEach(function (item, index) {
                if (item.mptId == data.mptId) {
                  _this.mptlist.splice(index, 1);
                }
              });
              this.$message({message: "删除成功", type: "success"});
            });
          })
          .catch(() => {
          });
    },
    editmilepost(data) {
      this.$router.push({
        path: "/milepost/milepostedit",
        query: {mptId: data.mptId},
      });
    },
    detailsgo() {
      this.$emit("detailsgo");
    },
    detailscreated() {
      this.$router.push({
        path: "/milepost/milepostAdd ",
        query: {id: this.$route.query.id},
      });
    },
    taskQueryClick(id) {
      this.listQuery.mptId = id
      this.taskList();
      this.taskFormVisible = true
    },
    taskList() {
      var _this = this;
      taskList(_this.listQuery, false).then((res) => {
        const {data} = res;
        this.taskForm = data.records;
        this.taskTotal = data.total;
      });
    },
    beOverdue(val) {
      var timestamp1 = new Date(val).getTime(); //结束时间
      var timestamp2 = new Date().getTime(); //现在时间
      var d = parseInt((timestamp1 - timestamp2) / 1000 / (24 * 3600)); //d>0 没到时间  d<0时间已经过了
      if (d < 0) {
        return Math.abs(d);
      } else {
        return null;
      }
    },
    statusClick() {
      this.taskList()
    }
  },
};
</script>
<style scoped>
.app {
  width: 100%;
  padding: 14px;
}

.app_top {
  display: flex;
  justify-content: space-between;
}

.app_top_span {
  margin: 0px;
}

.app_top_span_text {
  font-size: 16px;
  color: rgb(46, 64, 94);
  margin-left: 16px;
  cursor: pointer;
}

.app_item {
  display: flex;
  box-shadow: rgb(236, 237, 240) 0px -1px 0px 0px inset;
}

.app_item_mian {
  flex: 6;
  padding: 14px 0px;
  /* background-color: aquamarine; */
}

.app_item_stats {
  flex: 4;
}

.app_item_mian_top {
  display: flex;
  align-items: center;
}

.app_item_mian_top_span {
  font-size: 14px;
  font-weight: 700;
  color: rgb(46, 64, 94);
  margin-right: 8px;
}

.app_item_mian_top_zhi {
  color: rgb(193, 199, 208);
  font-size: 12px;
  border: 1px solid rgb(193, 199, 208);
  border-radius: 5px;
  padding: 2px 4px 2px 4px;
  margin-right: 8px;
}

.app_item_mian_top_yu {
  color: rgb(222, 53, 11);
  font-size: 12px;
  border: 1px solid rgb(222, 53, 11);
  border-radius: 5px;
  padding: 2px 4px 3px 4px;
  margin-right: 8px;
}

.app_item_mian_bottom {
}

.app_item_mian_bottom_span {
  font-size: 13px;
  color: rgb(46, 64, 94);
}

.app_item_mian_bottom_span_one {
  font-size: 12px;
  color: rgb(144, 154, 170);
  margin-left: 8px;
}

.app_item_stats {
  padding: 14px 0px;
}

.app_item_stats_button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.app_item_stats_button_one_span {
  display: inline-block;
  width: 80px;
  font-size: 13px;
  color: rgb(46, 64, 94);
}

.cpnter_app {
  width: 100%;
  height: 24px;
}

.app_item_seting {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.bottom {
  width: 100%;
  display: flex;
  justify-content: center;
}

.projectTask_data {
  width: 100%;
  display: flex;
  /* height: 200px; */
  align-items: center;
  justify-content: center;
  color: #909aaa;
}

[v-cloak] {
  display: none !important;
}

.proj_pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
}

.app_item_statssrtting {
  display: flex;
}
.task_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  line-height: 30px;
}

.task_list_left {
  display: flex;
}

.task_list_right {
  /*margin-right: 30px;*/
}

.task-table-item-title {
  cursor: pointer;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #2e405e;
  font-size: 12px;
  margin-right: 10px;
  width: 180px;
}

.task-table-item-date {
  color: #909aaa;
  margin-right: 10px;
  font-size: 12px;
  width: 160px;
  display: block;
  text-align: right;
}

.task-table-item-overdue {
  font-size: 12px;
  color: #ff4949;
  width: 70px;
  margin-right: 10px;
  text-align: right;
}

.task-table-item-member {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 111px;
  height: 20px;
  text-align: right;
}

.task-table-item-member-title {
  width: 86px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 10px;
}

.task-table-item-member-title:hover {
  color: #1890ff;
}

.task-table-item-member-logo {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  /* background-color: #e47777; */
}

.task-table-item-status {
  max-width: 52px;
  min-width: 22px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #909aaa;
  margin-right: 10px;
  font-size: 12px;
}
</style>
